HTMLify

style.css
Views: 33 | Author: cody
body {
    background-color: #161622;
    display: grid;
    place-items: center;
    height: 100vh;
}

.wave {
    width: 6em;
    height: 4em;
}

.wave .rect {
    height: 100%;
    width: 0.5em;
    display: inline-block;
    animation: wave-stretch-delay 1.2s infinite ease-in-out;
}

.wave .rect-1 {
    background-color: #337ab7;
    animation-delay: -1.2s;
}

.wave .rect-2 {
    background-color: #33b75d;
    animation-delay: -1.1s;
}

.wave .rect-3 {
    background-color: #9db733;
    animation-delay: -1s;
}

.wave .rect-4 {
    background-color: #b7335d;
    animation-delay: -0.9s;
}

.wave .rect-5 {
    background-color: #d601af;
    animation-delay: -0.8s;
}

@keyframes wave-stretch-delay {

    0%,
    40%,
    100% {
        transform: scaleY(0.4);
    }

    20% {
        transform: scaleY(1);
    }
}

Comments